<template>
    <view class="goods-view">
        <view class="goods-img-view">
            <u-image border-radius="10" width="170rpx" height="170rpx" :src="goodsImg"></u-image>
            <text class="goods-type" v-if="goodsType === 'PINTUAN'">多人拼团</text>
        </view>
        <view class="goods-info-view">
            <view class="goods-info-name u-line-2" :goodsName="goodsName">
                 {{goodsName}}
            </view>
            <view class="goods-spec-view" v-if="goodsSpecList && goodsSpecList.length">
                <text class="goods-spec">{{ goodsSpecList | formatterSkuSpec }} </text>
                <text class="goods-specs">{{ goodsNum }}件</text>
            </view>
            <view class="goods-tag-view u-p-t-10" v-if="goodsPromotion && goodsPromotion.length">
                <u-tag class="u-m-r-20" :text="tag" type="error" mode="plain" v-for="(tag, index) in goodsPromotion" :key="index" />
            </view>
        </view>
        <view class="goods-price-view">
            <custom-price v-if="goodsPrice != null" :price="goodsPrice" :fontWeight="600" size="30"></custom-price>
            <view class="goods-num" :goodsNum="goodsNum">
                x{{goodsNum}}
            </view>
        </view>
    </view>
</template>

<script>

    /**
     * 商品Cell组件
     *
     * ===== 使用场景 ======
     * 购物车页，确认订单页，我的订单页。
     *
     * ===== 参数 =====
     * goodsName        商品名称
     * goodsSpecList    商品规格
     * goodsPrice       商品金额
     * goodsNum         商品数量
     * goodsImg         商品图片
     * goodsPromotion   商品促销活动
     * goodsType        商品类型
     */
    export default {
        props:{
            goodsName: {
                type: String,
                default: ''
            },
            goodsSpecList: {
                type: Array,
                default() {
                    return []
                }
            },
            goodsPrice: {
                type: [Number, String],
                default: null
            },
            goodsNum: {
                type: Number,
                default: 1
            },
            goodsImg: {
                type: String,
                default: ''
            },
            goodsPromotion: {
                type: Array,
                default() {
                    return []
                }
            },
            goodsInfo: {
                type: [Object, Array],
                default() {
                    return [{}, []]
                }
            },
            goodsType: {
                type: String,
                default: ''
            }
        }
    }
</script>

<style lang="scss" scoped>
    .goods-view {
        display: flex;
        flex-direction: row;
        margin-bottom: 20rpx;
        .goods-img-view {
            position: relative;
            .goods-type {
                position: absolute;
                right: 0;
                bottom: 0;
                color: #FFFFFF;
                background-color: #ff5000;
            }
        }
        .goods-info-view {
            margin: 0rpx 20rpx;
            flex: 1;
            .goods-info-name {
                // font-weight: bold;
            }
            .goods-spec-view {
                margin-top: 20rpx;
                .goods-specs {
                    margin-left: 16rpx;
                }
                .goods-spec {
                    color: #909399;
                    background-color: #f3f4f6;
                    padding: 0 5rpx;
                    font-size: 28rpx;
                }
            }
        }
        .goods-price-view {
            text-align: right;
            .goods-price {
                font-weight: bold;
            }
            .goods-num {
                color: #909399;
            }
        }
    }
</style>
